<template>
	<view class="saveraiders">
		<!-- <page-head :transparent='false'>
		    <slot slot="title">{{title.length>10?title.substr(0,10)+'...':title}}</slot>
		</page-head> -->
		<!-- 省钱累计 -->
		<view class="save-raiders-box">
			<view class="save-raiders-head">省钱攻略</view>
			<view class="save-raiders-text">累计为您省了</view>
			<view>
				<view class="save-raiders-money">{{ money }}</view>
				元
			</view>
		</view>
		<!-- 省钱模块 -->
		<view class="save-raiders-list">
			<view class="save-raiders-model" v-for="(save, index) in saveList" :loadingText="loadingText" :key="index">
				<view class="save-raiders-data">{{ save.dissipateDate }}</view>
				<view v-for="item in save.consumeDetailVos">
					<view class="save-raiders-msg">
						我在雀实省钱
						<text class="msg-zone">{{ item.title }}</text>
						节省了
						<view class="msg-money">{{ item.deductionAmount }}元</view>
					</view>
					<view class="save-raiders-img">
						<image :src="item.picUrl" mode="aspectFill"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="loading-text">{{ loadingText }}</view>
	</view>
</template>

<script>
	let page = 1,
		limit = 10;
	export default {
		onLoad(event) {
			if (event.token != '' && event.token != 'null' && event.token != null && event.token != undefined && event.token !=
				'undefined') {
				uni.setStorageSync('token', decodeURI(event.token));
				uni.setStorageSync('bump', event.bump);
				uni.setStorageSync('relationId', event.relationId);
				uni.setStorageSync('mobile', event.customerId);
			}
			/* else {
				 onStartLogin()
			} */
			page = 1
			this.getsaveList();
			this.getconsume();
		},
		data() {
			return {
				money: 0,
				saveList: [],
				loadingText: '加载中...',
				title: '发现'
			};
		},
		onReachBottom: function() {
			this.getsaveList();
		},
		onPullDownRefresh: function() {
			page = 1;
			limit = 10;
			this.saveList = [];
			this.loadingText = '加载中...';
			this.getsaveList();
			this.getconsume();
		},
		methods: {
			getsaveList() {
				try {
					console.log('getsavelist === ' + uni.getStorageSync('token'));
					uni.request({
						url: this.$usereq + '/coupon-customer/rechargeable/consume/list',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')) || decodeURI(UrlParam().token),
							'content-type': 'application/json'
						},
						data: {
							page: page,
							limit: limit
						},
						success: res => {
							let datas = res.data;
							let newList = datas.data.list;
							if (newList != '' && newList.length > 0) {
								this.saveList = this.saveList.concat(newList);
								page++;
								if (newList.length < 10) {
									this.loadingText = '没有更多了';
								}
							} else {
								this.loadingText = '没有更多了';
							}
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					uni.hideLoading();
					this.loadingText = '没有更多了';
					console.log(e.message);
				}
			},
			getconsume() {
				try {
					uni.request({
						url: this.$usereq + '/coupon-customer/rechargeable/consume/total',
						method: 'GET',
						header: {
							'blade-auth': decodeURI(uni.getStorageSync('token')) || decodeURI(UrlParam().token),
							'content-type': 'application/json'
						},
						data: {},
						success: res => {
							let datas = res.data;
							this.money = datas.data ? datas.data : 0;
							uni.stopPullDownRefresh();
						}
					});
				} catch (e) {
					console.log(e.message);
				}
			}
		}
	};
</script>

<style lang="scss">
	.saveraiders {
		width: 100%;
		background: #f3f3f3;

		.save-raiders-box {
			background-color: #ffff00;
			height: 417px;
			width: 100%;
			font-size: 40px;
			box-sizing: border-box;
			position: fixed;
			z-index: 100;
			background-image: url('../../static/img/savebg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			text-align: center;

			.save-raiders-head {
				font-size: 32px;
				margin-top: 64px;
				color: #fff;
			}

			.save-raiders-text {
				font-size: 26px;
				margin-top: 80px;
				color: #ffbfc4;
			}

			view:nth-child(3) {
				margin-top: 42px;
				font-size: 30px;
				letter-spacing: 2px;
				color: #fff;

				.save-raiders-money {
					display: inline-block;
					font-weight: 600;
					font-size: 50px !important;
				}
			}
		}

		.save-raiders-list {
			margin-top: 437px;
			box-sizing: border-box;

			.save-raiders-model {
				width: 94.6%;
				margin: 0 auto;
				margin-bottom: 10px;
				background: #fff;
				border-radius: 16px;
				padding: 20px 15px;
				box-sizing: border-box;

				.save-raiders-data {
					font-size: 22px;
					color: #9a9a9a;
				}

				.save-raiders-msg {
					font-size: 30px;
					margin-top: 10px;
					line-height: 60px;

					.msg-zone {
						color: #fe2c3f;
					}

					.msg-money {
						color: #fe2c3f;
						height: 60px;
						text-align: center;
						border: 1px solid #fe2c3f;
						float: right;
						padding: 0 30px;
						border-radius: 16px;
					}
				}

				.save-raiders-img {
					margin-top: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					width: 140px;
					height: 140px;

					image {
						width: 120px;
						height: 120px;
					}
				}
			}
		}
	}

	.loading-text {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60px;
		line-height: 60px;
		color: #979797;
		font-size: 24px;
	}
</style>
